<template>
  <div class="common-layout">

    <el-container style=" height:100%; width:100%">
      <el-header>
        <el-affix :offset="10">
          <nav>
            <router-link to="/home">图片展示</router-link>
            <el-divider direction="vertical" />
            <router-link to="/geolocation">地理环境</router-link>
            <!-- <el-divider direction="vertical" />
            <router-link to="/figures">历史名人</router-link> -->
            <el-divider direction="vertical" />
            <router-link to="/landing">宣传视频</router-link>
            <el-divider direction="vertical" />
            <router-link to="/discussion">留言讨论</router-link>
          </nav>
        </el-affix>

      </el-header>
      <el-main style=" height:100%; width:100%">
        <transition name="el-fade-in-linear">
          <router-view></router-view>
        </transition>
      </el-main>
      <el-footer></el-footer>
    </el-container>
  </div>
  <el-backtop :right="100" :bottom="100" />
</template>

<style>
#app {
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
  /* 扩大一下可点击范围 */
  padding: 12px 16px;
  text-decoration: none;
}

nav a.router-link-exact-active {
  color: #42b983;
  /* 扩大一下可点击范围 */
  padding: 12px 16px;
  text-decoration: none;
}
</style>
